<template>
  <div class="ashboard-container">
    <div class="ashboard-container-center">
      <div>
        <div class="ashboard-container-title">
          <div>重点活动</div>
          <span class="ashboard-container-heng" />
        </div>
        <div class="swiper-img">
          <img src="~@/assets/dashboard/one.png" alt="">
        </div>
      </div>
      <div>
        <div class="ashboard-container-title">
          <div>组织建设</div>
          <span class="ashboard-container-heng" />
        </div>
        <div class="swiper-img">
          <img src="~@/assets/dashboard/two.png" alt="">
        </div>
      </div>
      <div>
        <div class="ashboard-container-title">
          <div>公司新闻</div>
          <span>查看更多</span>
          <span class="ashboard-container-heng" />
        </div>
        <div class="ashboard-container-dl">
          <div class="ashboard-container-dt">
            <img src="~@/assets/dashboard/three.png" alt="">
          </div>
          <div class="ashboard-container-dd">2019年4月19日，被誉为机器人行业“诺贝尔”的第五届 恰佩克颁奖典礼在芜湖举行。
            本届颁奖典礼由中国机器人 网和恰佩克奖委员会共同主办，第五届恰佩克奖延续了“ 遇见恰佩克·预见新未来”的主题，立足当下，展望未来。</div>
        </div>
        <div class="ashboard-container-dl">
          <div class="ashboard-container-dt">
            <img src="~@/assets/dashboard/four.png" alt="">
          </div>
          <div class="ashboard-container-dd">2019年4月19日，被誉为机器人行业“诺贝尔”的第五届 恰佩克颁奖典礼在芜湖举行。
            本届颁奖典礼由中国机器人 网和恰佩克奖委员会共同主办，第五届恰佩克奖延续了“ 遇见恰佩克·预见新未来”的主题，立足当下，展望未来。</div>
        </div>
        <div class="ashboard-container-dl">
          <div class="ashboard-container-dt">
            <img src="~@/assets/dashboard/five.png" alt="">
          </div>
          <div class="ashboard-container-dd">2019年4月19日，被誉为机器人行业“诺贝尔”的第五届 恰佩克颁奖典礼在芜湖举行。
            本届颁奖典礼由中国机器人 网和恰佩克奖委员会共同主办，第五届恰佩克奖延续了“ 遇见恰佩克·预见新未来”的主题，立足当下，展望未来。</div>
        </div>
        <div class="ashboard-container-dl">
          <div class="ashboard-container-dt">
            <img src="~@/assets/dashboard/six.png" alt="">
          </div>
          <div class="ashboard-container-dd">2019年4月19日，被誉为机器人行业“诺贝尔”的第五届 恰佩克颁奖典礼在芜湖举行。
            本届颁奖典礼由中国机器人 网和恰佩克奖委员会共同主办，第五届恰佩克奖延续了“ 遇见恰佩克·预见新未来”的主题，立足当下，展望未来。</div>
        </div>
      </div>
      <div>
        <div class="ashboard-container-title">
          <div>通知公告</div>
          <span>查看更多</span>
          <span class="ashboard-container-heng" />
        </div>
        <div class="ashboard-container-content">
          伟本智能成立于1997年，注册资本为4770万元人民币，公司位于上海
          市松江区文吉路555号（原地址松江区东兴路398号） 。员工300多人其
          中70% 以上是工程技术人员。公司主营业务为以工业机器人为核心的柔
          性智能化生产装备的系统集成和工业机器人再制造服务，为全国制造行
          业客户提供一站式智能化整体解决方案和交钥匙项目。在大连，重庆等 地分设技术、销售和服务机构。
        </div>
        <ul class="ashboard-container-list">
          <li v-for="(item, index) in newList" :key="index">
            <i />
            <span>{{ item.text }}</span>
            <strong>{{ item.date }}</strong>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'DashboardAdmin',
  components: {
  },
  data() {
    return {
      newList: [{
        id: 1,
        text: '伟本智能面向中核集团系统内公开招聘中层干部。',
        date: '2020-06-10'
      }, {
        id: 2,
        text: '关于开展中核集团卡通形象征集活动的通知。',
        date: '2020-06-10'
      }, {
        id: 3,
        text: '伟本智能机电（上海）股份有限公司公开选聘高级管理。',
        date: '2020-06-10'
      }, {
        id: 4,
        text: '关于举办伟本集团首届短视频大赛暨2020年新闻业务。',
        date: '2020-06-10'
      }, {
        id: 5,
        text: '伟本智能面向中核集团系统内公开招聘中层干部。',
        date: '2020-06-10'
      }, {
        id: 6,
        text: '关于开展中核集团卡通形象征集活动的通知。',
        date: '2020-06-10'
      }, {
        id: 7,
        text: '伟本智能机电（上海）股份有限公司公开选聘高级管理。',
        date: '2020-06-10'
      }, {
        id: 8,
        text: '关于举办伟本集团首届短视频大赛暨2020年新闻业务。',
        date: '2020-06-10'
      }, {
        id: 9,
        text: '伟本智能面向中核集团系统内公开招聘中层干部。',
        date: '2020-06-10'
      }, {
        id: 10,
        text: '关于开展中核集团卡通形象征集活动的通知。',
        date: '2020-06-10'
      }, {
        id: 11,
        text: '伟本智能机电（上海）股份有限公司公开选聘高级管理。',
        date: '2020-06-10'
      }, {
        id: 12,
        text: '关于举办伟本集团首届短视频大赛暨2020年新闻业务。',
        date: '2020-06-10'
      }]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  // padding: 32px;
  background-color: #fff;
  position: relative;
  .ashboard-container-center {
    position: relative;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    margin:0 auto;
    >div {
      width: 49%;
      background: red;
      margin-top: 24px;
      background:rgba(244,246,249,1);
      border:2px solid rgba(235, 241, 244, 1);
      box-sizing: border-box;
      padding: 20px;
      // padding-bottom: 0px;
      position: relative;
      .ashboard-container-title {
        font-size:16px;
        color:rgba(57,70,98,1);
        padding-bottom: 10px;
        position: relative;
        border-bottom: 2px solid rgba(228,232,241,1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        span {
          font-size:14px;
          color:rgba(155,155,171,1);
          cursor: pointer;
        }
        .ashboard-container-heng {
          position: absolute;
          width:65px;
          height:3px;
          background:rgba(70,128,255,1);
          bottom: -2px;
          left: 0px;
          right: 0px;
        }
      }
      .ashboard-container-dl {
        margin-bottom: 30px;
        width: 100%;
        overflow: hidden;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        height:112px;
        .ashboard-container-dt {
          width: 173px;
          height: 100%;
          margin-right: 19px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .ashboard-container-dd {
          flex: 1;
          line-height:20px;
          color:rgba(155,155,171,1);
          font-size:14px;
        }
      }
      .ashboard-container-dl:last-child {
        margin-bottom: 0px;
      }
      .ashboard-container-content {
        font-size: 14px;
        color:rgba(78,89,114,1);
        line-height:24px;
        border:2px solid rgba(225, 231, 234, 1);
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
      }
      .ashboard-container-list {
        margin: 0px;
        padding: 0px;
        li {
          color: #4E5972;
          list-style: none;
          display: flex;
          align-items: center;
          line-height: 1;
          margin-bottom: 20px;
          font-size: 14px;
          cursor: pointer;
          i {
            display: block;
            width:10px;
            height:10px;
            background:linear-gradient(0deg,rgba(241,131,0,1),rgba(247,182,105,1));
            box-shadow:0px 3px 4px 0px rgba(197,198,200,0.82);
            border-radius:50%;
            box-sizing: border-box;
            margin-right: 10px;
          }
          strong {
            display: block;
            font-weight: normal;
            font-size:14px;
            color:rgba(155,155,171,1);
            flex: 1;
            text-align: right;
          }
        }
        li:last-child {
          margin-bottom: 0px;
        }
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
